
<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)">
  <main-header>
    <!-- <nz-tabset style="background: #fff;padding: 0 24px;" [(nzSelectedIndex)]="order_type" (nzSelectChange)="page=1;getOrderList();">
      <nz-tab>
        <ng-template #nzTabHeading>所有订单</ng-template>
      </nz-tab>
      <nz-tab>
        <ng-template #nzTabHeading>普通订单</ng-template>
      </nz-tab>
      <nz-tab>
        <ng-template #nzTabHeading>拼团订单</ng-template>
      </nz-tab>
    </nz-tabset> -->
    <ul nz-menu [nzMode]="'horizontal'" style="padding: 0 24px;line-height: 46px;">
      <li [nzSelected]="order_type==0" nz-menu-item (click)="page=1;order_type=0;getOrderList();">所有订单</li>
      <!--<li [nzSelected]="order_type==1"  nz-menu-item (click)="page=1;order_type=1;getOrderList();">普通订单</li>-->
      <!--<li [nzSelected]="order_type==2"  nz-menu-item (click)="page=1;order_type=2;getOrderList();">拼团订单</li>-->
    </ul>
  </main-header>
  <!--<main-slider >-->
    <!--<div style="height:100%;">-->
      <!--<ul nz-menu [nzMode]="'inline'" [nzTheme]="'light'" [nzInlineCollapsed]="isCollapsed" style="height:100%;" [style.overflow-y]="isCollapsed?'':'auto'" [style.overflow-x]="isCollapsed?'':'hidden'">-->
        <!--<li style="padding-left:24px;" nzSelected="true" nz-menu-item (click)="changeOrderType('0')"><i class="iconfont icon-quanbudingdan1"></i><span class="nav-text">全部订单</span></li>-->
        <!--<li style="padding-left:24px;" nz-menu-item (click)="changeOrderType('1')"><i class="icon iconfont icon-daifukuan"></i><span class="nav-text">待付款</span></li>-->
        <!--<li style="padding-left:24px;" nz-menu-item (click)="changeOrderType('2')"><i class="icon iconfont icon-daifahuo"></i><span class="nav-text">待发货</span></li>-->
        <!--<li style="padding-left:24px;" nz-menu-item (click)="changeOrderType('3')"><i class="icon iconfont icon-daishouhuo"></i><span class="nav-text">待收货</span></li>-->
        <!--<li style="padding-left:24px;" nz-menu-item (click)="changeOrderType('4')"><i class="icon iconfont icon-jiaoyiwancheng"></i><span class="nav-text">交易完成</span></li>-->
        <!--<li style="padding-left:24px;" nz-menu-item (click)="changeOrderType('5')"><i class="icon iconfont icon-fuwushouquan"></i><span class="nav-text">售后</span></li>-->
      <!--</ul>-->
    <!--</div>-->
  <!--</main-slider>-->
  <main-content>
    <div style="background: #fff; min-height: 360px;min-width: 700px;">
      <!--<div class="search-line">-->
        <!--<div class="search-condition-item">-->
          <!--<span class="condition-name">订单编号:</span>-->
          <!--<nz-input [nzSize]="'large'"-->
                    <!--[(ngModel)]="order_no"-->
                    <!--[nzPlaceHolder]="'请输入订单编号'"-->
                    <!--(keydown)="keyDown($event)"-->
          <!--&gt;</nz-input>-->
        <!--</div>-->
        <!--<div class="search-condition-item">-->
          <!--<span class="condition-name">商品名称:</span>-->
          <!--<nz-input [nzSize]="'large'"-->
                    <!--[(ngModel)]="goods_name"-->
                    <!--[nzPlaceHolder]="'请输入商品名称'"-->
                    <!--(keydown)="keyDown($event)"-->
          <!--&gt;</nz-input>-->
        <!--</div>-->
        <!--<div class="search-condition-item" *ngIf="searchOpen">-->
          <!--<span class="condition-name">买家昵称:</span>-->
          <!--<nz-input [nzSize]="'large'"-->
                    <!--[(ngModel)]="nick_name"-->
                    <!--[nzPlaceHolder]="'请输入买家昵称'"-->
                    <!--(keydown)="keyDown($event)"-->
          <!--&gt;</nz-input>-->
        <!--</div>-->
        <!--<div class="search-condition-item" *ngIf="searchOpen">-->
          <!--<span class="condition-name">订单日期:</span>-->
          <!--<nz-datepicker-->
            <!--[nzSize]="'large'"-->
            <!--(ngModelChange)="_startDate=$event;_startValueChange()"-->
            <!--[(ngModel)]="_startDate"-->
            <!--[nzDisabledDate]="_disabledStartDate" nzShowTime-->
            <!--[nzFormat]="'YYYY-MM-DD'"-->
            <!--[nzPlaceHolder]="'起始时间'"></nz-datepicker>-->
          <!--<nz-datepicker-->
            <!--[nzSize]="'large'"-->
            <!--(ngModelChange)="_endDate=$event;_endValueChange()"-->
            <!--[(ngModel)]="_endDate"-->
            <!--[nzDisabledDate]="_disabledEndDate" nzShowTime-->
            <!--[nzFormat]="'YYYY-MM-DD'"-->
            <!--[nzPlaceHolder]="'结束时间'"></nz-datepicker>-->
        <!--</div>-->
        <!--<div class="search-condition-item" *ngIf="searchOpen">-->
          <!--<span class="condition-name">手机号:</span>-->
          <!--<nz-input-->
            <!--[nzSize]="'large'"-->
            <!--[(ngModel)]="phone"-->
            <!--[nzPlaceHolder]="'请输入手机号'"-->
            <!--(keydown)="keyDown($event)"-->
          <!--&gt;</nz-input>-->
        <!--</div>-->

        <!--<div class="operate-area">-->
          <!--<button nz-button [nzType]="'primary'" (click)="search()">-->
            <!--<span>查 询</span>-->
          <!--</button>-->
          <!--<button nz-button [nzType]="'default'" (click)="reset()">-->
            <!--<span>重 置</span>-->
          <!--</button>-->
          <!--<span class="operate" *ngIf="!searchOpen" (click)="searchOpen = !searchOpen"><span>展开</span><i class="anticon anticon-down"></i></span>-->
          <!--<span class="operate" *ngIf="searchOpen" (click)="searchOpen = !searchOpen"><span>收起</span><i class="anticon anticon-up"></i></span>-->
        <!--</div>-->
      <!--</div>-->
      <!--<div class="operate-line">-->
        <!--<nz-dropdown>-->
          <!--<button nz-button nz-dropdown><span>订单导出</span> <i class="anticon anticon-down"></i></button>-->
          <!--<ul nz-menu>-->
            <!--<li nz-menu-item>-->
              <!--<a href="javascript:;" (click)="exportChecked(1)">全部导出</a>-->
            <!--</li>-->
            <!--<li nz-menu-item>-->
              <!--<a href="javascript:;" (click)="exportChecked(2)">勾选导出</a>-->
            <!--</li>-->
          <!--</ul>-->
        <!--</nz-dropdown>-->
        <!--&lt;!&ndash;<button nz-button *ngIf="!checkedIds.length" [nzType]="'default'" disabled>&ndash;&gt;-->
        <!--&lt;!&ndash;<span>批量发货</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</button>&ndash;&gt;-->
        <!--&lt;!&ndash;<button nz-button *ngIf="!!checkedIds.length" [nzType]="'default'">&ndash;&gt;-->
        <!--&lt;!&ndash;<span>批量发货</span>&ndash;&gt;-->
        <!--&lt;!&ndash;</button>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="download-progress ing">&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="text">数据报表正在生成，请耐心等待</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<nz-progress [(ngModel)]="progress_width" [nzStrokeWidth]="2" [nzShowInfo]="false"></nz-progress>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
      <!--</div>-->
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;getOrderList()">清空</a>
      </div>
      <nz-table #nzTable
                [nzAjaxData]="listData"
                [nzLoading]="loading"
                [nzTotal] ="total"
                [(nzPageIndex)]="page"
                [(nzPageSize)]="pageSize"
                (nzPageIndexChange)="getOrderList()">
        <thead nz-thead>
        <tr>
          <!--<th nz-th [nzCheckbox]="true">-->
            <!--<label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">-->
            <!--</label>-->
          <!--</th>-->
          <th nz-th><span>订单编号</span></th>
          <th nz-th><span>数量</span></th>
          <th nz-th><span>状态</span></th>
          <th nz-th><span>下单时间</span></th>
          <!--<nz-table-sort (nzValueChange)="sort('created_at',$event)"></nz-table-sort>-->
          <th nz-th><span>实付金额</span></th>
          <!--<nz-table-sort (nzValueChange)="sort('fee',$event)"></nz-table-sort>-->
          <!--<th nz-th><span>操作</span></th>-->
        </tr>
        </thead>
        <tbody nz-tbody  *ngFor="let data of nzTable.data">
        <tr nz-tbody-tr (click)="data.order_sub_show = !data.order_sub_show">
          <!--<td nz-td [nzCheckbox]="true">-->
            <!--<label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="_refreshStatus($event,data.id, data)">-->
            <!--</label>-->
          <!--</td>-->
          <td nz-td>
            <!--<span class="order-type" [ngClass]="{'der-type-purple2':data.order_type_text==='推客免单','der-type-purple1':data.order_type_text==='团长免单','der-type-red':data.order_type_text==='普通拼团','der-type-purple':data.order_type_text==='免单拼团','der-type-orange':data.order_type_text==='抽奖拼团','der-type-green':data.order_type_text==='拉新拼团'}">{{data.order_type_text}}</span>-->
             {{data.order_no}}
          </td>
          <td nz-td>{{data.order_sub.length}}</td>
          <td nz-td>
            <div><span class="status-circle" [ngClass]="{'bg-green':data.state===1,'bg-red':data.order_status_remark=== 2,'bg-yellow':data.order_status_remark=== 0,'bg-blue':data.order_status_remark===3}"></span>
              {{data.state === 0? '待支付':''}}{{data.state === 1? '已支付':''}}{{data.state === 2? '已关闭':''}}
            </div>
            <!--<div>-->
              <!--<span class="status-circle" [class.bg-green]="data.erp_status_text === 'ERP已同步'" [class.bg-red]="data.erp_status_text === 'ERP未同步'"></span>{{data.erp_status_text}}-->
            <!--</div>-->
          </td>
          <td nz-td>
            <div >{{data.created_at}}</div>
          </td>
          <td nz-td>
            <div>￥{{data.fee_fact}}</div>
            <!--<div>含运费￥{{data.express_fee/1000}}</div>-->
          </td>
          <!--<td nz-td>-->
            <!--<a href="javascript:;" routerLink="../deliver/{{data.order_no}}" *ngIf="data.order_status_remark!='交易关闭'&&data.express_status_text==='待发货'">发货</a>-->
            <!--<span nz-table-divider *ngIf="data.express_status_text==='待发货'"></span>-->
            <!--<a href="javascript:;" routerLink="../modify/{{data.order_no}}" *ngIf="data.order_status_remark!='交易关闭'&&(data.express_status_text==='待发货'||data.pay_status_text==='待付款')">修改地址</a>-->
            <!--<a href="javascript:;" routerLink="../logistics/{{data.order_no}}" *ngIf="data.express_status_text==='待收货'">物流</a>-->
          <!--</td>-->
        </tr>
        <tr nz-tbody-tr class="order_sub_tr"  *ngFor="let item of data.order_sub;let i = index;">
          <td nz-td colspan="2" class="order_sub" *ngIf="!!data.order_sub_show">
            <!--<img src="{{aliyunOssOutputUrl}}/{{turnParse(item.goods_info).first_picture}}" alt="">-->
            <div >
              <div class="order-sub-title">商品: {{item.goods_info.name}}</div>
              <!--<div style="width: 210px;">{{turnParse(item.goods_info).name}}</div>-->
            </div>

          </td>
          <td nz-td colspan="1" class="order_sub" *ngIf="!!data.order_sub_show">
            <!--<img src="{{aliyunOssOutputUrl}}/{{turnParse(item.goods_info).first_picture}}" alt="">-->
            <div >
              <div class="order-sub-title">数量: {{item.count}}</div>
              <!--<div style="width: 210px;">{{turnParse(item.goods_info).name}}</div>-->
            </div>

          </td>
          <td nz-td colspan="2" class="order_sub" *ngIf="!!data.order_sub_show">
            <!--<img src="{{aliyunOssOutputUrl}}/{{turnParse(item.goods_info).first_picture}}" alt="">-->
            <div >
              <div class="order-sub-title">价格: ￥{{item.price_discount}}</div>
              <!--<div style="width: 210px;">{{turnParse(item.goods_info).name}}</div>-->
            </div>

          </td>
          <!--<td nz-td *ngIf="!!data.order_sub">-->
            <!--<div class="order-sub-title">数量</div>-->
            <!--<div>{{item.quantity}}</div>-->
          <!--</td>-->
          <!--<td nz-td *ngIf="!!data.order_sub_show">-->
            <!--<div *ngIf="data.order_type!=4&&data.order_type!=5">-->
              <!--<span class="status-circle" *ngIf="item.refund_text" [ngClass]="{'bg-green':item.refund_text==='退款成功','bg-red':item.refund_text==='拒绝退款','bg-yellow':item.refund_text!=='退款成功'&&item.refund_text!=='拒绝退款'}"></span>-->
              <!--{{item.refund_text}}-->
            <!--</div>-->
          <!--</td>-->
          <!--<td nz-td *ngIf="!!data.order_sub">-->
            <!--&lt;!&ndash;<div *ngFor="let item2 of item.sku_info.sku">{{item2.goods_sku_attribute_name + ':' + item2.goods_sku_attribute_value_name}}</div>&ndash;&gt;-->
          <!--</td>-->
          <!--<td nz-td *ngIf="!!data.order_sub">-->
            <!--<div class="order-sub-title">价格</div>-->
            <!--<div>￥{{item.fee*item.quantity/1000}}</div>-->
          <!--</td>-->
          <!--<td nz-td *ngIf="!!data.order_sub_show">-->
            <!--<div *ngIf="data.order_type!=4&&data.order_type!=5">-->
              <!--<a href="javascript:;" *ngIf="item.refund_text === '申请退款'" (click)="dealRefund(item)">处理退款</a>-->
              <!--<span>{{item.refund_progress}}</span>-->
            <!--</div>-->
          <!--</td>-->
        </tr>
        </tbody>
      </nz-table>
    </div>
  </main-content>
</main-layout>


<!-- 退款弹窗 start -->
<nz-modal
  [nzVisible]="refundModalVisible"
  [nzTitle]="'退款'"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  (nzOnCancel)="refundModalVisible = false;">
  <ng-template #modalContent>
    <div class="refund-info-item">
      <span class="refund-title">退货原因:</span>
      <span class="refund-info">{{refund_info?.refund_reason_remark}}</span>
    </div>
    <div class="refund-info-item">
      <span class="refund-title">退货说明:</span>
      <span class="refund-info">{{refund_info?.apply_refund_desc}}</span>
    </div>
    <div class="refund-info-item">
      <span class="refund-title">商品数量:</span>
      <span class="refund-info">{{refund_info?.goods_number}}</span>
      <span class="refund-title">退款金额:</span>
      <span class="refund-info">{{refund_info?.refund_fee/1000}}</span>
    </div>
    <div class="refund-info-item">
      <span class="refund-title">驳回原因:</span>
      <span class="refund-info"><nz-input style="width: 300px;" [nzSize]="'large'" [(ngModel)]="refund_remark"></nz-input></span>
    </div>
  </ng-template>
  <ng-template #modalFooter>
    <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="refuseRefund()">
      <span>驳 回</span>
    </button>
    <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="agreeRefund()">
      <span>同 意</span>
    </button>
  </ng-template>
</nz-modal>
<!-- 退款弹窗 end -->
